<template>
	<page-meta>
	    <navigation-bar
			title="设备综合信息"
			background-color="#EEEEEE"
			front-color="#ffffff "
	    />
	</page-meta>
	<view class="layui-fluid" style="height: calc(100% - 30px)">
		<view class="layui-row layui-col-space15" style="height: 100%">
			<view class="layui-col-md4" style="height: 100%">
				<view class="classifyCanvasView">
					<uni-section title="设备分类统计" type="line"></uni-section>
					<echarts :option="classifyOption" style="height: 300px;" ></echarts>		
				</view>
				<view class="healthCanvasView">
					<uni-section title="系统健康值" type="line"></uni-section>
					<echarts :option="healthOption" style="height: 300px;" ></echarts>
				</view>
				<view style="height: 35%">
					<uni-section title="核心交换机性能" type="line"></uni-section>
					<echarts :option="exchangeOption" style="height: 300px;" ></echarts>
				</view>
			</view>
			<view class="faultCanvasView">
				<uni-section title="CIOS系统故障统计" type="line"></uni-section>
				<echarts :option="faultOption" style="height: 300px;"></echarts>
			</view>
			<view class="simpleTable">
				<z-table
					:tableData="faultData" 
					:columns="faultTableColumns" 
					:textAlign="'center'" 
					:titleTextAlign="'center'"></z-table>
			</view>
			<view class="layui-col-md4" style="height: 100%">
				<view style="height: 70%">
					<uni-section title="服务器cpu使用情况" type="line"></uni-section>
					<echarts :option="cupOption" style="height: 300px;"></echarts>
				</view>
			</view>
		</view>
	</view>
</template>

<script>

import {classifyOption, systemHealthOption, exchangePerformanceOption,faultStatisticsOption,classificationStatisticsOption} from '@/static/js/comprehensiveInfoOptions.js'
import Echarts from '@/components/echarts/echarts.vue'

export default {
	name: 'comprehensiveInfo',
	data () {
		return {
			classifyOption: {},
			healthOption: {},
			exchangeOption: {},
			faultOption: {},
			cupOption: {},
			faultTableHtml: '',
			faultData: [],
			faultTableColumns: [
				{
					title: '系统名称',
					key: 'system',
					width: 275
				},
				{
					title: '故障数量',
					key: 'quantity',
					width: 275
				}
			]
		}
	},
	methods: {
		roundDatas (num){
		  let datas = [];
		  for (let i = 0; i < num; i++) {
		    datas.push({
		      name: "circle" + i
		    });
		  }
		  return datas;
		},
		// 分类统计
		initClassifyDataH5(){
			let dataList = []
			let dataValueList = []
			this.$myRequest({
				url: '/alarm/classificationOfEquipment',
				method: 'GET',
			}).then((rep) => {
				let dataList = []
				let dataValueList = []
				let alarmGradingStation = rep.data
				for(let i = 0;i < alarmGradingStation.length; i++){
					dataList.push( alarmGradingStation[i].system)
					let map=new Map
					map.name= alarmGradingStation[i].system
					map.value= alarmGradingStation[i].proportion
					dataValueList.push(map)
				}
				
				this.classifyOption = classifyOption(dataList,dataValueList)
			})
			// this.classifyOption = classifyOption(dataList,dataValueList)
		},
		//健康值
		initSystemHealthListH5(){
			this.$myRequest({
				url: '/alarm/systemHealthValue',
				method: 'GET',
			}).then((rep) => {
				let systemHealth = rep.data
				this.healthOption = systemHealthOption(systemHealth)
			})
		},
		//交换机性能
		initExchangePerformanceH5(){
			this.$myRequest({
				url: '/monitor/getDeviceOfSwitch',
				method: 'GET',
			}).then((rep) => {
				if(rep.data){
					let SwitchDataList = []
					let SwitchData = Object.entries(rep.data);
					for(let i=0;i< SwitchData.length;i++){
						SwitchDataList.push(SwitchData[i]);
					}
					this.exchangeOption = exchangePerformanceOption(SwitchDataList)
				}
			})
		},
		// 故障统计
		initFaultStatisticsH5 () {
			this.$myRequest({
				url: '/alarm/deviceFailureStatistics',
				method: 'GET',
			}).then((rep) => {
				if(rep.data){
					this.faultData = rep.data
					let deviceFailureList = []
					let deviceFailureValueList = []
					let deviceFailureData = rep.data;
					for(var i=0;i< deviceFailureData.length;i++){
						deviceFailureList.push( deviceFailureData[i].system);
						deviceFailureValueList.push( deviceFailureData[i].quantity);
					}
					this.faultOption = faultStatisticsOption(deviceFailureValueList,deviceFailureList)
				}
			})
		},
		// cpu使用情况
		initClassificationStatisticsH5 () {
			this.$myRequest({
				url: '/monitor/getServerResourceByParams?mode=cpu',
				method: 'GET',
			}).then((rep) => {
				if(rep.data){
					this.cupOption = classificationStatisticsOption(rep.data)
				}
			})
		}
	},
	components: {
		Echarts
	},
	mounted () {
		this.initClassifyDataH5() //函数调用
		this.initSystemHealthListH5()
		this.initExchangePerformanceH5()
		this.initFaultStatisticsH5()
		this.initClassificationStatisticsH5()
	}
}
</script>

<style>
	.ec-canvas {
	        display: flex;
	        height: 100%;
	        flex: 1;
	    }
	
	.canvasView {
		width: 700upx;
		height: 650upx; 
	}
	
	.classify-canvas {
		width: 700upx;
		height: 600upx;
	}
	
	.classifyCanvasView {
		height: 600upx;
	}
	
	.healthCanvasView {
		width: 700upx;
		height: 400upx;
	}
	.faultCanvasView{
		width: 700upx;
		height: 720upx; 
	}
	
	.simpleTable {
		margin-left: 100upx;
		margin-right: 100upx;
	}
</style>
